chakra-react-select を利用して、アイコン付きのプルダウンリストを作ってみた

#Chakra UI

#初心者向け

大高大輔

2023.02.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！DA(データアナリティクス)事業本部サービスソリューション部の大高です。

Chakra UIを利用したUIコンポーネントを作成している時に、アイコン付きのプルダウンリストを作りたくなることはありませんか？私はあります。

そこで、今回はChakra UIを利用したReact Selectのラッパーコンポーネントである chakra-react-select を利用してアイコン付きのプルダウンリストを作る方法を書きたいと思います。

前提条件

Next.jsを利用したプロジェクトにおいて、それぞれ以下のバージョンを利用しています。

next
- 13.1.6
chakra-react-select
- 3.3.9
chakra-ui
- 2.4.9

また、アイコンの表示のために react-icons を利用しています。

アイコン付きのプルダウンリストを作ってみた

ということで、今回はサンプルとして簡単な表示をするだけですが、アイコン付きのプルダウンリストを作ってみました。

アイコンとして、Chrome、Safari、Edgeのアイコンをプルダウンリストの選択オプションに表示させるようにしました。

import { HStack, Icon, Text } from '@chakra-ui/react'
import { Select as ReactSelect, Size } from 'chakra-react-select'
import { ReactNode } from 'react'
import { FaChrome, FaEdge, FaQuestionCircle, FaSafari } from 'react-icons/fa'
import { IconType } from 'react-icons/lib'

export type Option = { label: string; value: string }
export type SelectWithIconProps = {
  size: Size
}
export default function SelectWithIcon(props: SelectWithIconProps) {
  const options: Option[] = [
    {
      label: 'Chrome',
      value: 'chrome',
    },
    {
      label: 'Safari',
      value: 'safari',
    },
    {
      label: 'Edge',
      value: 'edge',
    },
  ]

  const formatOptionLabel = (option: Option): ReactNode => {
    let iconType: IconType = FaQuestionCircle
    switch (option.value) {
      case 'chrome':
        iconType = FaChrome
        break
      case 'safari':
        iconType = FaSafari
        break
      case 'edge':
        iconType = FaEdge
        break
      default:
        break
    }

    return (
      <HStack>
        <Icon as={iconType} />
        <Text as={'span'}>{option.label}</Text>
      </HStack>
    )
  }

  return (
    <ReactSelect
      {...props}
      placeholder={'選択してください...'}
      options={options}
      formatOptionLabel={formatOptionLabel}
    />
  )
}

実際の画面表示は以下のようになります。